<template>
  <view class="g-row">
    <image class="order-bg g-bge1" mode="widthFix" :src="imageUrl +'pice9.png'"></image>
    <u-navbar leftText="车辆管理" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
              :bgColor="bgColor">
    </u-navbar>
    <view class="wp">
      <view class="ul-order ul-vehiclemanagement" v-if="platesNums.length">
        <view class="li" v-for="(item, index) in platesNums" :key="index">
          <navigator url="" hover-class="none" class="con">
            <view class="top">
              <view class="left">
                <view class="tit">{{ item.plate }}</view>
                <view class="ps">
                  <image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'"
                         v-if="item.checkState === 1"></image>
                  <view class="span">
                    {{ item.checkState === 1 ? "已认证" : "" }}
                  </view>
                </view>
              </view>
              <view class="right" @click="colseit(item)">解除绑定</view>
            </view>
            <view class="inner" v-if="false">
              <view class="m-itembox">
                <view class="item">
                  <image :src="imageUrl + 'icone4.png'" mode="widthFix" class="icon"></image>
                  <text class="tit1">自动支付</text>
                  <view class="g-switch">
                    <u-switch space="2" v-model="value1" activeColor="#5ad07b"
                              inactiveColor="rgba(201, 208, 213,1)">
                    </u-switch>
                  </view>
                </view>
                <view class="item">
                  <image :src="imageUrl + 'icone5.png'" mode="widthFix" class="icon"></image>
                  <text class="tit1">隐私保护</text>
                  <view class="g-switch">
                    <u-switch space="2" v-model="value2" activeColor="#5ad07b"
                              inactiveColor="rgba(201, 208, 213,1)">
                    </u-switch>
                  </view>
                </view>
                <view class="item">
                  <image :src="imageUrl + 'icone6.png'" mode="widthFix" class="icon"></image>
                  <text class="tit1">停车信息</text>
                  <view class="g-switch">
                    <u-switch space="2" v-model="value3" activeColor="#5ad07b"
                              inactiveColor="rgba(201, 208, 213,1)">
                    </u-switch>
                  </view>
                </view>
              </view>

            </view>

          </navigator>
        </view>

        <!-- <view class="li">
          <navigator url="" hover-class="none" class="con">
            <view class="top">
              <view class="left">
                <view class="tit">鄂E · E12345</view>
              </view>
              <view class="right">解除绑定</view>
            </view>
            <view class="inner">
              <view class="m-itembox">
                <view class="item">
                  <image :src="imageUrl + 'icone4.png'" mode="widthFix" class="icon"></image>
                  <text class="tit1">自动支付</text>
                  <view class="g-switch">
                    <u-switch space="2" v-model="value4" activeColor="#5ad07b"
                      inactiveColor="rgba(201, 208, 213,1)">
                    </u-switch>
                  </view>
                </view>

              </view>

            </view>

          </navigator>
        </view>
        <view class="li">
          <navigator url="" hover-class="none" class="con">
            <view class="top">
              <view class="left">
                <view class="tit">鄂E · E12345</view>
              </view>
              <view class="right">解除绑定</view>
            </view>
            <view class="inner">
              <view class="m-itembox">
                <view class="item">
                  <image :src="imageUrl + 'icone4.png'" mode="widthFix" class="icon"></image>
                  <text class="tit1">自动支付</text>
                  <view class="g-switch">
                    <u-switch space="2" v-model="value5" activeColor="#5ad07b"
                      inactiveColor="rgba(201, 208, 213,1)">
                    </u-switch>
                  </view>
                </view>

              </view>

            </view>

          </navigator>
        </view>
        <view class="li">
          <navigator url="" hover-class="none" class="con">
            <view class="top">
              <view class="left">
                <view class="tit">鄂E · E12345</view>
              </view>
              <view class="right">解除绑定</view>
            </view>
            <view class="inner">
              <view class="m-itembox">
                <view class="item">
                  <image :src="imageUrl + 'icone4.png'" mode="widthFix" class="icon"></image>
                  <text class="tit1">自动支付</text>
                  <view class="g-switch">
                    <u-switch space="2" v-model="value6" activeColor="#5ad07b"
                      inactiveColor="rgba(201, 208, 213,1)">
                    </u-switch>
                  </view>
                </view>
              </view>
            </view>
          </navigator>
        </view> -->
      </view>
    </view>
    <button v-if="bind" class="g-submit1 g-submite1" @click="binding">
      添加车牌
    </button>
  </view>
</template>

<script>
import {deleteData, get} from '../../api/myHttps';

export default {

  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',
      plateNumber: ['', '', '', '', '', '', '', ''],
      //
      value1: true,
      value2: false,
      value3: true,
      value4: true,
      value5: true,
      value6: true,
      platesNums: [],
      bind: true,
    }
  },
  onShow() {
    this.getPlates();
  },
  methods: {
    binding() {
      uni.navigateTo({
        url: '/pages/vehiclemanagement/licenseplatebinding'
      })
    },
    getPlates() {
      let ownerId = uni.getStorageSync("ownerId");
      get('/city-mobile/plate/bindPlate/' + ownerId).then((res) => {
        console.log(res);
        this.platesNums = res;
        this.bind = this.platesNums.length < 5;
      })
    },
    // 头部滚动
    onPageScroll(res) {
      if (res.scrollTop >= 60) {
        this.bgColor = '#ffffff'
      } else {
        this.bgColor = 'transparent'
      }
    },
    plateChange(val) {
      this.plateNumber = val;
    },
    // 解除绑定
    colseit(data) {
      uni.showModal({
        title: "取消绑定确认",
        content: "确定要取消绑定 '" + data.plate + "' 车牌吗?",
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            let ownerId = uni.getStorageSync("ownerId");
            deleteData('/city-mobile/plate/bindPlate?ownerId=' + ownerId + '&plate=' + data
                .plate).then((res) => {
              console.log("打印bindPlate：" + res);
              this.getPlates();
              uni.showToast({
                title: '解除绑定成功',
                icon: 'success', // 可选 success/loading/none
                duration: 2000 // 持续时间，单位ms
              });
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },

  }
}
</script>
<style>
page {
  background-color: #F4FAF7;
}

.g-row {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
  /* 兼容iOS 11.0-11.2 */
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  /* 兼容iOS 11.2+ */
  overflow: hidden;
  min-height: 100vh;
}

.ul-order {
  padding-bottom: 60rpx;
  padding-top: 20rpx;
}

.ul-order .li {
  margin-bottom: 20rpx;
}

.ul-order .con {
  padding: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
  display: block;

}

.ul-order .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ul-order .top .left {
  display: flex;
  align-items: center;
}

.ul-order .top .tit {
  color: #1C274C;
  font-size: 36rpx;
  font-weight: 600;
}

.ul-order .top .ps {
  position: relative;
  margin-left: 10rpx;
}

.ul-order .top .ps .bg {
  display: block;
  width: 110rpx;
  height: 32rpx;
}

.ul-order .top .ps .span {
  display: inline-block;
  position: absolute;
  right: 18rpx;
  color: #fff;
  font-size: 20rpx;
  font-weight: 500;
  top: 50%;
  transform: translateY(-50%);
}

.ul-order .top .right {
  font-size: 24rpx;
  color: #24A7CE;
  min-width: 136rpx;
  height: 48rpx;
  line-height: 48rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: rgba(36, 167, 206, 0.1);
  border-radius: 30rpx;
  overflow: hidden;
}


.ul-order .inner {
  background: #F4FAF7;
  border-radius: 10rpx;
  padding: 20rpx 20rpx;
  margin: 20rpx 0 0;
  overflow: hidden;
}

.m-itembox {
  display: flex;
  justify-content: space-between;
  align-content: center;
  overflow-anchor: ;
}

.m-itembox .tit1 {
  font-size: 24rpx;
  color: rgba(28, 39, 76, 0.6);
  padding: 0 5rpx;
}

.m-itembox .icon {
  display: inline-block;
  vertical-align: middle;
  width: 24rpx;
  height: 24rpx;
  margin-top: 6rpx;
}

.m-itembox .item {
  position: relative;
  display: flex;
  align-items: center;
  float: left;
  width: 33.3%;
}

.m-itembox .item:last-child {
  width: auto;
  float: right;
}

.m-itembox .item:nth-child(2) {
  text-align: center;
}

.m-itembox .item:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8rpx;
  display: block;
  content: ' ';
  width: 5rpx;
  height: 32rpx;
  background-color: rgba(28, 39, 76, 0.6);
  opacity: 0.2;
}

.m-itembox .item:last-child:before {
  display: none;
}

/deep/ .m-itembox .u-switch {
  width: 48rpx !important;
  height: 24rpx !important;
}

/deep/ .m-itembox .u-switch__node {
  border-radius: 50%;
  width: 18rpx !important;
  height: 18rpx !important;
  transform: translateX(-4rpx) !important;
}
</style>
